<!-- 装修组件 -->
<template>
	<view class="me-design">
		<!-- 左上角返回按钮 -->
		<image v-if="res.show_back" class="design-back" :src="res.btn_back" mode="scaleToFill"></image>
		
		<!-- 状态栏 -->
		<view v-if="res.bar_auto" :style="{height:'20px', background:res.bar_bg}"></view>
		
		<view v-for="comp in res.comps" :key="comp._id">
			<!-- 图片 -->
			<view class="me-comp" v-if="comp.type==designType.img" @click="change(comp)">
				<me-area v-if="comp.src" :areas="comp.areas">
					<image class="image" :src="comp.src" mode="widthFix"></image>
				</me-area>
				<view v-else class="input-tip">请上传图片</view>
				<me-design-edit v-if="comp._id == value._id" @edit="edit"></me-design-edit>
			</view>
			
			<!-- 轮播 -->
			<view class="me-comp" v-if="comp.type==designType.swiper" @click="change(comp)">
				<swiper v-if="comp.list&&comp.list[0]&&comp.list[0].src" :style="{'background': 'url('+comp.bg+')', 'background-size': 'cover', height: getSwiperHeight(comp._id)}" :indicator-dots="comp.list.length>1&&comp.dot_show" :autoplay="comp.autoplay" :indicator-color="comp.dot_color" :indicator-active-color="comp.dot_color_act" :previous-margin="toPx(comp.margin)" :next-margin="toPx(comp.margin)" :circular="comp.circular">
					<swiper-item v-for="val in comp.list" :key="val._id" :style="{padding: '0 '+ toPx(comp.space)}">
						<image class="image" :style="{height:'100%', 'border-radius': toPx(comp.radius)}" :src="val.src" mode="aspectFill" @load="swiperLoad($event,val._id)"></image>
					</swiper-item>
				</swiper>
				<view v-else class="input-tip">请上传轮播图</view>
				<me-design-edit v-if="comp._id == value._id" @edit="edit"></me-design-edit>
			</view>
			
			<!-- 间隔 -->
			<view class="me-comp" v-if="comp.type==designType.line" @click="change(comp)">
				<view :style="{height: toPx(comp.height), background: comp.bg}"></view>
				<me-design-edit v-if="comp._id == value._id" @edit="edit"></me-design-edit>
			</view>
			
			<!-- 视频 -->
			<view class="me-comp" v-if="comp.type==designType.video" @click="change(comp)">
				<video class="video" :style="{height: toPx(comp.height)}" :src="comp.src" :poster="comp.poster"></video>
				<me-design-edit v-if="comp._id == value._id" @edit="edit"></me-design-edit>
			</view>
			
			<!-- 浮层 -->
			<view class="me-comp me-layer" :class="{'no-shadow': !comp.shadow}" v-if="comp.type==designType.layer && comp.show_layer_admin!=false" @click="change(comp)">
				<view class="me-layer-content" :class="{'layer-center': comp.center}" :style="{width: getLayerWidth(comp), top: getLayerTop(comp), left: getLayerLeft(comp), right: getLayerRight(comp), bottom: getLayerBottom(comp), 'z-index': comp.zIndex}">
					<me-area v-if="comp.src" :areas="comp.areas" @item-click="layerAreaClick($event, comp)">
						<image class="image" :src="comp.src" mode="widthFix"></image>
					</me-area>
					<view v-else class="input-tip">请上传图片</view>
				</view>
				<view v-if="comp.shadow" class="me-layer-shadow"></view>
				<me-design-edit v-if="comp._id == value._id" @edit="edit"></me-design-edit>
			</view>
		</view>
	</view>
</template>

<script>
	import designType from '../../common/design-type.js';
	export default {
		props:{
			res: { // 组件数据
				type: Object,
				default(){
					return {
						title: "", // 页面名称
						base_width: 375, // 页面宽度
						comps: [] // 组件
					}
				}
			},
			value: { // 当前操作的组件
				type: Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {
				designType, // 组件类型
				swiperHeight:[], // 轮播图的高度取最先加载完成的那张图片的高度
				scale: 0.5 // 预览的缩放比率: 输入的px需缩小0.5, 因为base_width为750的一半
			}
		},
		computed: {
			// 页面的标题 (页面默认通栏, 所以页面标题仅h5生效)
			pageTitle() {
				return this.res.title
			}
		},
		watch: {
			// 页面的标题 (页面默认通栏, 所以页面标题仅h5生效)
			pageTitle(val) {
				setTimeout(()=>{
					uni.setNavigationBarTitle({
						title: val
					})
				},100)
			}
		},
		methods: {
			// 预览的缩放比率: 输入的rpx需缩小0.5, 因为base_width为750的一半
			toPx(num){
				return num * this.scale + 'px'
			},
			// 点击切换组件
			change(comp){
				this.$emit('input', comp)
				this.$emit('change')
			},
			// 删除,上下移
			edit(arg){
				this.$emit('edit', arg)
			},
			// 轮播图的高度取最先加载完成的那张图片的高度
			swiperLoad(e, _id){
				let sw = this.swiperHeight.find(val => val._id == _id);
				if (!sw) {
					let h = e.detail.height * this.res.base_width / e.detail.width
					this.swiperHeight.push({_id, h: h+'px'})
				}
			},
			// 获取轮播高度
			getSwiperHeight(_id){
				let sw = this.swiperHeight.find(val => val._id == _id);
				return sw ? sw.h : '150px'
			},
			// 获取浮层宽度
			getLayerWidth(comp){
				return comp.width.indexOf('%')!=-1 ? comp.width : this.toPx(comp.width)
			},
			// 获取浮层top值
			getLayerTop(comp){
				return comp.bottom!="" ? 'auto' : comp.top.indexOf('%')!=-1 ? comp.top :this.toPx(comp.top)
			},
			// 获取浮层left值
			getLayerLeft(comp){
				return comp.right!="" ? 'auto' : comp.left.indexOf('%')!=-1 ? comp.left : this.toPx(comp.left)
			},
			// 获取浮层right值
			getLayerRight(comp){
				return comp.right=="" ? 'auto' : comp.right.indexOf('%')!=-1 ? comp.right : this.toPx(comp.right)
			},
			// 获取浮层bottom值
			getLayerBottom(comp){
				return comp.bottom=="" ? 'auto' : comp.bottom.indexOf('%')!=-1 ? comp.bottom : this.toPx(comp.bottom)
			},
			// 浮层热区点击事件
			layerAreaClick(area, comp){
				if(area.close) this.layerClose(comp)
			},
			// 关闭浮层
			layerClose(comp){
				this.$set(comp, 'show_layer_admin', false)
			}
		}
	}
</script>

<style lang="scss">
	.me-design{
		.design-back{
			z-index: 900;
			position: absolute;
			top: 20px;
			left: 10px;
			width: 40px;
			height: 40px;
			pointer-events: none;
		}
		
		.me-comp{
			position: relative;
			.image{
				width: 100%;
				height: auto;
				vertical-align: bottom;
			}
			.video{
				width: 100%;
				vertical-align: bottom;
			}
			
			&.me-layer{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				&.no-shadow{
					position: unset;
				}
				.me-layer-content{
					position: absolute;
					&.layer-center{
						transform: translate(-50%,-50%);
					}
				}
				.me-layer-shadow{
					z-index: 500;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0,0,0,.3);
				}
			}
		}
		
		.input-tip{
			padding: 30px;
			color: #999;
			text-align: center;
			background-color: #fafafa;
		}
		
	}
</style>
